<template>
  <div id="farmHouseJS">
    <div v-show="ISSHow">
      <div class="topZhuZhuangTu" style="width:355px;height:220px" id="topZhuZhuangTu"></div>
      <div class="grid">
        <div style="position:relative">
          <span><img width="40px" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/1.png" alt=""></span>
          <span>
            <i style="font-size:16px;color:#02c9b4;font-weight:800;position:absolute;top:-4px;left:44px">51</i><br />
            <i style="position:absolute;left:44px;top:14px">四到场过程管理(户)</i>
          </span>
        </div>
        <div style="position:relative">
          <span><img width="40px" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/2.png" alt=""></span>
          <span>
            <i style="font-size:16px;color:#c89936;font-weight:800;position:absolute;top:-4px;left:44px">0</i><br />
            <i style="position:absolute;left:44px;top:14px">发现问题(个)</i>
          </span>
        </div>
        <div style="position:relative">
          <span><img width="40px" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/3.png" alt=""></span>
          <span>
            <i style="font-size:16px;color:#c89936;font-weight:800;position:absolute;top:-4px;left:44px">0</i><br />
            <i style="position:absolute;left:44px;top:14px">问题整改(户)</i>
          </span>
        </div>
        <div style="position:relative">
          <span><img width="40px" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/4.png" alt=""></span>
          <span>
            <i style="font-size:16px;color:#188bd9;font-weight:800;position:absolute;top:-4px;left:44px">0</i><br />
            <i style="position:absolute;left:44px;top:14px">违规处置(个)</i>
          </span>
        </div>
      </div>
      <div class="bottomZhu" style="width:355px;margin-top:10px;margin-left:-10px" id="bottomZhu"></div>
    </div>
    <div v-show="!ISSHow">
      <div class="rightTop" style="width:355px;height:220px;margin-left:-10px" id="rightTop"></div>
      <div class="rightBottom" style="width:355px;height:220px;margin-left:-10px" id="rightBottom"></div>
    </div>
  </div>
</template>

<script>
import Pubsub from "pubsub-js";
export default {

  data () {
    return {
      autoHeight: 0,
      ISSHow: true
    }

  },
  methods: {
    _initConstruction () {
      const self = this;
      var xData = ['申请量', '审批量', '超期量'];
      var yData = [4991, 2048, 0];
      this.num = 0;
      const option = {
        grid: {
          top: "18%",
          left: "10",
          bottom: "8%",
          right: "5%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#CCCCCC",
              },
            },
            axisLabel: {
              interval: 0, //强制显示文字
              //   rotate: 40,
              textStyle: {
                color: "#000",
                // fontSize: ,
              },
              margin: 15,
            },
          },
        ],
        yAxis: [
          {
            name: "单位：户",
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,
              padding: 0,
            },
            minInterval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                // color: "#CCCCCC",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#CCCCCC",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#000",
                // fontSize: 14,
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "top", //insideRight,
              color: "#000",  //#00FEFE
            },
            //silent: true,
            barWidth: "15",
            barGap: "10%", // Make series be overlap
            barCateGoryGap: "10%",
            itemStyle: {
              normal: {
                color: new self.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "#047aff",
                  },
                  {
                    offset: 1,
                    color: "#3aaeff",
                  },
                ]),
                opacity: 1,
              },
            },
            data: yData,
          },
        ],
      };
      const element = self.$echarts.init(document.getElementById("topZhuZhuangTu"));
      element.clear();
      element.setOption(option);
    },
    _initConstructionBottom () {
      const self = this;
      var xData = ['施工工匠', '施工单位', '竣工验收'];
      var yData = [264, 11, 17];
      this.num = 0;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        barWidth: 15,
        grid: {
          top: "20%",
          //   left: "3%",
          //   right: 60,
          //   bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          // name: "万户",
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              show: false,
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: "#000",
            },
          },
          // axisTick: "none",
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: true
          },
        },
        yAxis: {
          type: "category",
          data: xData.reverse(),
          axisLabel: {
            interval: 0,
            // fontSize: ,/
            color: "#000",
          },
          splitLine: {
            show: false
          },
          axisLine: { //y轴
            show: false
          },
          // type: 'category'
          axisTick: {
            show: false
          },
        },
        series: [
          {
            //   name: "安全保障",
            type: "bar",
            // stack: "total",
            label: {
              show: true,
              position: "right", //insideRight,
              color: "#000",
              formatter: '{c} 人'
            },
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: function(params) { 
                  var colorList = ['#00C0FF','#EFE42A','#64BD3D']; 
                  return colorList[params.dataIndex] 
                }
              },
              
            },
            color: "#00C0FF",
            data: yData.reverse(),
          }
        ],
      };
      const element = this.$echarts.init(document.getElementById("bottomZhu"));
      this.autoHeight = 160 + 'px'; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
      element.resize({ height: this.autoHeight });
      if (element) {
        element.clear();
        element.setOption(option);
      }
    },
    _initConstructionRight1 () {
      const self = this;
      this.num = 0;
      var option = {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true
        },
        series: [
          {
            name: "一般",
            type: "pie",
            //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: false,
            tooltip: {},
            radius: ["60%", "47%"],
            center: ["50%", "50%"],
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: function (data) { // 设置圆饼图中间文字排版
                  return 70.54 + '% 覆盖率'
                }
              },
              emphasis: {
                show: false, //文字至于中间时，这里需为true
                textStyle: { //设置文字样式
                  fontSize: '12',
                  color: "#333"
                }
              }
            },
            data: [
              {
                value: 20765,
                itemStyle: {
                  normal: {
                    color: "rgba(80,150,224,0)"
                  }
                }
              },
              {
                value: 14648,  // 渐变色部分
                itemStyle: {
                  color: new self.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#45a7ff" },
                    { offset: 0.5, color: "#349dff" },
                    { offset: 1, color: "#017bff" }
                  ])
                },
              },
              {
                value: 6117, // 右侧部分
                itemStyle: {
                  normal: {
                    color: "#ededed"
                  }
                }
              }
            ]
          }
        ]
      };
      const element = self.$echarts.init(document.getElementById("rightTop"));
      element.clear();
      element.setOption(option);
    },
    _initConstructionRight2 () {
      const self = this;
      this.num = 0;
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#1b8ae7', '#f8da5b'],
        series: [
          {
            name: '集中处理设施',
            type: 'pie',
            radius: ['40%', '30%'],
            center: ['50%', '34%'],
            data: [
              { value: 1048, name: '终端处理设施' },
              { value: 735, name: '纳厂处理设施' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      const element = self.$echarts.init(document.getElementById("rightBottom"));
      element.clear();
      element.setOption(option);
    },
  },
  mounted () {
    Pubsub.subscribe('projectDetails', (msg, data) => {
      if (data == 0) {
        this.ISSHow = true
      } else {
        this.ISSHow = false
      }
    })
    this._initConstruction()
    this._initConstructionBottom()
    this._initConstructionRight1()
    this._initConstructionRight2()
  }
}
</script>

<style lang="scss" scoped>
#farmHouseJS {
  //   height: 66vh;
  overflow: auto;
  background: #ffffff;
  font-size: 14px;
  position: relative;
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
}
</style>
